<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<script src="../bower_components/vue/dist/vue.js"></script>
	<script src="../bower_components/vue-router/dist/vue-router.js"></script>
	<style>
		.v-link-active{
			color: #f40;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li><a v-link="{path:'/home'}">主页</a></li>
			<li><a v-link="{path:'/news'}">新闻</a></li>
		</ul>
		<div>
			<router-view></router-view>
		</div>

		<template id="home">
			<p>我是主页</p>
			<ol>
				<li><a v-link="{path:'/home/login'}">登录</a></li>
				<li><a v-link="{path:'/home/reg'}">注册</a></li>
			</ol>
			<div>
				<router-view></router-view>
			</div>
		</template>

		<template id="news">
			<p>我是新闻</p>
		</template>

		<template id="logininfo">
			<b>我是登录</b>

			<div>
				<a v-link="{path:'/home/login/edit'}">填写</a>
				<a v-link="{path:'/home/login/des'}">介绍</a>
			</div>

			<div>
				<router-view></router-view>
			</div>
		</template>
	</div>

	<script>
		// 1.准备根组件
		var App = Vue.extend();

		// 2.准备home和news的组件
		var Home = Vue.extend({
			template: '#home'
		})

		var News = Vue.extend({
			template: '#news'
		});

		// 3.准备路由
		var router = new VueRouter();

		// 4.进行关联
		router.map({
			'home':{
				component: Home,
				subRoutes:{
					'/login':{
						component: {
							template: '#logininfo'
						},
						subRoutes: {
							'/edit': {
								component: {
									template: '<b>我是填写信息</b>'
								}
							},
							'/des': {
								component: {
									template: '<b>我是登录描述信息</b>'
								}
							}
						}
					},
					'/reg':{
						component: {
							template: '<b>我是注册</b>'
						}
					}
				}
			},
			'news':{
				component: News
			},

		});

		// 5.启动路由
		router.start(App, "#box");

		// 6.路由跳转
		router.redirect({
			'/':'/home/login' 
		});
	</script>
</body>
</html>